<template>
	<view id="box">
		<u-toast ref="uToast"></u-toast>
		<image class="icon_img" src="@/static/images/nav_icon.svg"></image>
		<view class="login">
			<uni-forms ref="form" :modelValue="formData" :rules="rules">
				<uni-forms-item required label="用户昵称" name="nickname">
					<uni-easyinput :inputBorder="false" type="text" v-model="formData.nickname" placeholder="请输入昵称" />
				</uni-forms-item>
				<uni-forms-item required label="手机号" name="phone">
					<uni-easyinput :inputBorder="false" type="text" v-model="formData.phone" placeholder="请输入手机号" maxlength="11"/>
				</uni-forms-item>
				<uni-forms-item required label="短信验证" name="code">
					<uni-easyinput :inputBorder="false" type="number"
						v-model="formData.code" placeholder="短信验证" maxlength="6" clearSize="0"/>
					<text class="send_code" @click="sendCode">{{content}}</text>
				</uni-forms-item>
				<uni-forms-item required label="密码" name="password">
					<uni-easyinput :inputBorder="false" :passwordIcon="false"  type="password" v-model="formData.password" placeholder="请输入密码" maxlength="18"></uni-easyinput>
				</uni-forms-item> 
				<uni-forms-item required label="确认密码" name="password">
					<uni-easyinput :inputBorder="false" :passwordIcon="false" type="password" v-model="formData.confirmPassword" placeholder="请再次确认密码" maxlength="18"></uni-easyinput>
				</uni-forms-item> 
				<uni-forms-item>
					<u-checkbox-group @change="change">
						<u-checkbox :checked="checked" activeColor="#42B983" shape="circle" label=''></u-checkbox>
						<view style="padding-left: 5px;">已阅读并同意<text class="agreement_color">《思云课堂用户服务协议》</text></view>
					</u-checkbox-group>
				</uni-forms-item>
			</uni-forms>
			<button @click="formSubmit" class="login_btn" style="border-radius: 45px;">注册</button>
			<view class="create_user" @click="toLogin">已有账号去登录</view>
		</view>
	</view> 
</template>

<script>
	import {getLoginCode} from '@/static/http/getData.js'
	
	import {getLoginByPhone} from '@/static/http/getData.js'
	
	import {addBeforeUser} from '@/static/http/getData.js'
	
	export default {
		data() {
			return {
				//是否选中
				checked: false,
				formData: {
					phone: '',
					password: '',
					nickname: '',
					code:'',
					confirmPassword: '',
				},
				content: '获取验证码',
				//定时器
				timer: '',
				//验证码
				code: '',
				//倒计时
				timeout: 60,
				rules: {
					// 对phone字段进行必填验证
					phone: {
						rules: [{
								required: true,
								errorMessage: '请输入手机号',
							},
							{
								pattern: /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/,
								errorMessage: '请输入正确手机号',
							}
						]
					},
					// 对password字段进行必填验证
					password: {
						rules: [
							{
								required: true,
								errorMessage: '请输入密码',
							}, 
							/* {
								pattern: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z\\W]{6,18}$/,
								errorMessage: '密码长度为6-18位',
							} */
						]
					},
					// 对code字段进行必填验证
					code: {
						rules: [
							{
								required: true,
								errorMessage: '请输入验证码',
							},
						],
					}
				}
			}
		},
		onLoad() {
			
		},
		methods: {
			//发送验证码
			sendCode(){
				console.log(this.formData.phone);
				this.$refs.form.validateField(['phone']).then(res => {
					if(this.timeout == 60){
						getLoginCode().then(res => {
							this.code = res.data.data;
							console.log(this.code);
							if(this.code != ''){ 
								var params = {
									type: 'default',
									message: this.code,
								}
								this.$refs.uToast.show({
									...params
								})
							}
						})
						this.getTimeOut();
					}
				}).catch(err => {
					//移除表单的验证结果
					this.$refs.form.clearValidate(['phone', 'password']);
					uni.showToast({
						title:'请输入手机号',
						icon:'error',
						duration: 2000
					})
				})
			},
			//定时器
			getTimeOut(){
				this.timer = setInterval(()=>{
					this.content = this.timeout + '秒后重新获取';
					this.timeout--;
					if(this.timeout < 0){
						this.timeout = 60;
						this.content = '重新发送验证码';
						//停止定时器 
						clearInterval(this.timer);
					}
				},1000)
			},
			change(e){
				console.log(e.length);
				this.checked = !this.checked;
			},
			formSubmit(){
				var that = this;
				console.log(this.formData.nickname);
				this.$refs.form.validate().then(res => {
					if(this.timeout != 60){ 
						if(this.formData.code == this.code){
							if(this.checked){
								getLoginByPhone({phone: this.formData.phone}).then(res => {
									console.log(res.data.data);
									if(res.data.data != null){
										uni.showToast({
											title:'此用户已注册',
											icon:'error',
											duration:1000
										})
									}else{
										console.log('===========================');
										console.log(that.formData);
										that.addBeforeUser(that.formData);
									}
								})
							}else{
								var params = {
									type: 'default',
									message: '请同意并勾选服务协议'
								}
								console.log(this.code);
								this.$refs.uToast.show({
									...params,
									complete() {
										params.url && uni.navigateTo({
											url: params.url
										})
									}
								})
							}
						}else{
							uni.showToast({
								title: '验证码错误',
								icon: 'error',
								duration: 2000
							})
						}
					}else{
						uni.showToast({
							title: '验证码失效',
							icon: 'error',
							duration: 2000
						})
					}
				}).catch(err => {
					this.$refs.form.clearValidate(['phone', 'password','code']);
					uni.showToast({
						title:'必填项不能为空',
						icon:'error',
						duration:1000
					})
				})
			},
			//去登录
			toLogin(){
				uni.navigateTo({
					url: '/pages/login/login'
				})
			},
			//添加用户
			addBeforeUser(formData){
				addBeforeUser(formData).then(res => {
					if(res.data.data){
						this.clearForm();
						uni.showToast({
							title:'创建成功',
							duration:1000
						})
					}else{
						uni.showToast({
							title:'创建失败',
							icon:'error',
							duration:1000
						})
					}
				})
			},
			clearForm(){
				//提交后清空表单 
				this.formData.phone = '';
				this.formData.password = '';
				this.formData.code = '';
				this.formData.nickname = '';
				this.formData.confirmPassword = '';
				this.timeout = 60;
				clearInterval(this.timer);
				this.content = '获取验证码';
				if(this.checked == true){
					this.checked = false;
				}
			},
		},
		watch:{
			formData:{
				handler(newVal){
					//console.log(newVal.password);
				},
				deep: true,
			},
		}
	}
	
</script>

<style lang="scss" scoped>
	*{
		margin: 0px;
		padding: 0px;
	}
	#box {
		width: 84%; 
		margin: 0 auto;
		text-align: center;
	}
	.icon_img{
		width: 70px;
		height: 70px;
		margin: 20% auto;
	}
	.send_code{
		position: absolute;
		top: 7px;
		right: 0px;
		color: #1ABC9C;
	}
	.agreement_color{
		color: #1ABC9C;
	}
	.login_btn{
		background-color: #1ABC9C;
		color: #fff;
	}
	.create_user{
		width: 100px;
		margin: 20px auto;
		color: #1ABC9C;
	}
</style>
